<template>
    <page>
        <div class="fit" flex="main:center cross:center" v-if="!order[0].list.length">
            <div class="tc">
                <i class="iconfont icon-yuexinggouwuchekong f64"></i>
                <p>购物车还没有兑换的礼品~</p>
                <m-button class="mt30" v-back>立刻去兑换</m-button>
            </div>
        </div>
        <template v-else>
            <div class="pb30 mb30">
                <ul class="white-bg mylist mb20 bdb" v-for="i in order">
                    <li class="h50 white-bg px10 f16 bdb" flex="cross:center">
            <span @click="chooseClick(i)" class="equal mr10">
               <transition name="zoom">
                <i class="iconfont icon-selected f18 c1" v-if="i.choose == true"></i>
                <i class="iconfont icon-unselected f18" v-else></i>
               </transition>
            </span>
                        {{i.order.shopName}}
                    </li>
                    <li flex="cross:center" class="mx12 py16" v-for="(i2, index2) in i.list"
                        :class="{'bdb': i.list.length > index2 + 1}">
            <span @click="chooseClick(i2)" class="equal mr8">
               <transition name="zoom">
                <i class="iconfont icon-selected f18 c1" v-if="i2.choose == true"></i>
                <i class="iconfont icon-unselected f18" v-else></i>
               </transition>
            </span>
                        <m-img :src="i2.image" ratio="1" class="sz80 mx12"/>
                        <div flex-box="1" class="px10 content">
                            <p>{{i2.title}}</p>
                            <div flex="main:justify cross:center" class="mt5">
                                <p class="orange">积分: {{i2.price}}</p>
                                <m-spinner v-model="i2.number"/>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <nav class="fix posbl fitw h50 white-bg pl10" flex="cross:center">
                <span @click="allChooseClick" class="equal mr4">
                   <transition name="zoom">
                      <i class="iconfont icon-selected f18 c1" v-if="allChoose == true"></i>
                      <i class="iconfont icon-unselected f18" v-else></i>
                   </transition>
                </span>
                <span>全选</span>
                <a class="c1 ml30" @click="on_del">删除</a>
                <span class="ml20 tr mr10" flex-box="1">合计积分:&nbsp;&nbsp;<span class="c1">{{total}}</span></span>
                <span class="white px30 tap btn fith" flex="cross:center" :class="{'disable': total <= 0}"
                   @click="submit">立即兑换</span>
            </nav>
        </template>
    </page>
</template>
<script>
  import { XButton } from 'vux'
  import store from 'store2'
  export default {
    data () {
      return {
        count: 0,
        showPop: true,
        order: [{list: [], order: {}}],
        allChoose: false
      }
    },
    created () {
      let car = store.get('car') || {list: [], order: {}}
      this.order = [car]
      this.check()
    },
    computed: {
      total () {
        let c = 0
        this.order.forEach(e => {
          e.list.forEach(e2 => {
            if (e2.choose) {
              c += e2.price * e2.number
            }
          })
        })
        return c
      }
    },
    components: {
      XButton
    },
    methods: {
      allChooseClick () {
        this.order.forEach(e => {
          e.list.forEach(e => {
            this.$set(e, 'choose', !this.allChoose)
          })
        })
        this.check()
      },
      chooseClick (i) {
        this.$set(i, 'choose', !i.choose)
        i.list && i.list.forEach(e => {
          this.$set(e, 'choose', i.choose)
        })
        this.check()
      },
      check () {
        this.allChoose = true
        this.order.forEach(e => {
          e.choose = e.list.every(e2 => e2.choose == true)
          if (!e.choose) {
            this.allChoose = false
          }
        })
      },
      getForm () {
        let list = this.order[0].list.filter(x => x.choose).map(e => {
          return {
            ...e,
            commodityId: e.commodityId,
            detailTotle: e.price * e.number,
          }
        })
        let order = this.order[0].order
        order = {
          ...this.order[0].order,
          createDate: new Date(),
          payMoney: this.total,
          payTime: new Date(),
        }
        return {
          list,
          order
        }
      },
      submit () {
        this.$vux.confirm.show({
          title: '确认兑换?',
          onConfirm: async () => {
            let formData = this.getForm()
            console.log(formData)
            let body = await this.$post_json_loading('order/addOrder', formData)
            if (body.code == 200) {
              let car = store.get('car') || {list: [], order: {}}
              let list = car.list
              if (formData.list.length == list.length) {
                car = null
              } else {
                list = list.filter(x => formData.list.every(y => y.commodityId !== x.commodityId))
                car.list = list
              }
              console.log(car)
              store.set('car', car)
              this.$router.replace({name: 'store_confirmOrder', query: {id: body.obj}})
            }
          }
        })
      },
      on_del () {
        if (this.allChoose) {
          this.order = [{list: [], order: {}}]
        } else {
          this.order[0].list.forEach((x, index) => {
            x.choose && this.order[0].list.splice(index, 1)
          })
        }
      }
    },
    watch: {
      order: {
        deep: true,
        handler (order) {
          store.set('car', order[0])
        }
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
    i {
        border: 1px solid transparent;
    }

    nav {
        box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, .6);
    }

    .btn {
        background-image: linear-gradient(-90deg, #ff5200 0%, #ff8f00 100%), linear-gradient(#ff7e00, #ff7e00);
        background-blend-mode: normal,
        normal;
        &.disable {
            opacity: 0.4;
            pointer-events: none;
        }
    }

    .content {
        align-self: flex-start;
    }
</style>
